<script src="../../main.js"></script>
<template>
    <div>
      wangeditor的使用
      <br>
      <br>
      <hr>
      <div style="width: 70rem;"  id="editor" class="editor"></div>
      <el-button disabled @click="editor.disable()">禁用富文本</el-button>

      <wang v-model="fwb" @change="htmlchange"></wang>
    </div>
</template>

<script>
    import E from "wangeditor"
    import wang from "./component/index"
    export default {
      name: "T",
      components: {wang},
      created() {

      },
      mounted() {
        this.$nextTick(() => {
          // console.log(document.getElementById("editor"))
          this.init()
        })
      },
      computed: {},
      data() {
        return {
          editor: null,
          htmlEle:"",
          imgsrc:[],
          fwb: `<div>123</div>`
        }
      },
      methods: {
        // 获取权限
        init(data) {
          //反向配置 menu
          /*  this.editor.config.excludeMenus = [
            'emoticon',
            'video'
          ]*/
          // 配置字体颜色
          /*    this.editor.config.colors = [
            '#000000',
            '#eeece0',
            '#1c487f',
            '#4d80bf'
          ]*/
          // 配置字体 // 对象形式 v4.6.16
          /* this.editor.config.fontNames = [
             {name:"黑体",value:"黑体"},
             {name:"绝绝字体",value:"Times New Roman"},
             // 字符串形式
             '黑体',
             '仿宋',
             '楷体',
             '标楷体',
             '华文仿宋',
             '华文楷体',
             '宋体',
             '微软雅黑',
             'Arial',
             'Tahoma',
             'Verdana',
             'Times New Roman',
             'Courier New',
           ]*/
          // 编辑器的字号
          /*
          this.editor.config.fontSizes = {
            'x-small': { name: '10px', value: '1' },
            'small': { name: '13px', value: '2' },
            'normal': { name: '16px', value: '3' },
            'large': { name: '18px', value: '4' },
            'x-large': { name: '24px', value: '5' },
            'xx-large': { name: '32px', value: '6' },
            'xxx-large': { name: '48px', value: '7' },
          }*/
          // this.editor.config.showFullScreen = true  //是否全屏
          // this.editor.config.showMenuTooltips = false   // 隐藏菜单栏文字提示
          // 配置图片上传 地址
          // this.editor.config.uploadImgServer = '/upload-img'  // 接口要返回 application/json 格式
/*          {
            // errno 即错误代码，0 表示没有错误。
            //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
            "errno": 0,
            // data 是一个数组，返回图片Object，Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的，可以不设置或设置为空字符串,需要注意的是url是一定要填的。
            "data": [
            {
              url: "图片地址",
              alt: "图片文字说明",
              href: "跳转链接"
            },
            {
              url: "图片地址1",
              alt: "图片文字说明1",
              href: "跳转链接1"
            },
          ]
          }*/
          // 使用回调函数，对上传图片的不同阶段，做相应处理
        /*  this.editor.config.uploadImgHooks = {
            // 上传图片之前
            before: function(xhr) {
              console.log(xhr)

              // 可阻止图片上传
              // return {
              //   prevent: true,
              //   msg: '需要提示给用户的错误信息'
              // }
            },
            // 图片上传并返回了结果，图片插入已成功
            success: function(xhr) {
              console.log('success', xhr)
            },
            // 图片上传并返回了结果，但图片插入时出错了
            fail: function(xhr, editor, resData) {
              console.log('fail', resData)
            },
            // 上传图片出错，一般为 http 请求的错误
            error: function(xhr, editor, resData) {
              console.log('error', xhr, resData)
            },
            // 上传图片超时
            timeout: function(xhr) {
              console.log('timeout')
            },
            // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            customInsert: function(insertImgFn, result) {
              // result 即服务端返回的接口
              console.log('customInsert', result)

              // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
              insertImgFn(result.data[0])
            }
          }*/

        },
        htmlchange(html){
          console.log("html",html)
          this.fwb = html
          // console.log("fwb",this.fwb)
        }
      },

    }

 </script>
